<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Zoil - Editor</title>
    
    <script src="/static/scripts/jquery-1.7.2.min.js"></script>
    
	<script type="text/javascript" src="/static/scripts/jstree/jquery.jstree.js""></script>
	<script type="text/javascript" src="/static/scripts/jstree/_lib/jquery.cookie.js""></script>
	<script type="text/javascript" src="/static/scripts/jstree/_lib/jquery.hotkeys.js"></script>
    
    <link rel="stylesheet" href="/static/scripts/codemirror/lib/codemirror.css"">
    <script src="/static/scripts/codemirror/lib/codemirror.js""></script>
	<script src="/static/scripts/codemirror/mode/python/python.js""></script>
	<script src="/static/scripts/codemirror/mode/css/css.js""></script>
	<script src="/static/scripts/codemirror/mode/htmlmixed/htmlmixed.js""></script>
	<script src="/static/scripts/codemirror/mode/javascript/javascript.js""></script>
	<script src="/static/scripts/codemirror/mode/xml/xml.js""></script>
	<script src="/static/scripts/codemirror/mode/yaml/yaml.js""></script>

<script type="text/javascript" >
			var editor = null;
			var view_path = null;

			function get_selected_id() {
				return $('#tree').jstree('get_selected').attr('id');
			}
			
			function get_selected_path() {
				String($('#tree').jstree('get_selected').text()).trim()
				
			}

			function get_mode(mimetype) {
				var mode = null;
				$.each(CodeMirror.listModes(), function(index, value) {
					if (value == "htmlmixed") {
						test = "html";
					} else {
						test = value;
					}
					if (mimetype.indexOf(test) != -1) {
						mode = value;
						return false;
					}
					return true;
				});
				return mode;
			}
			
			function set_mode() {
				var mimetype = $("#mimetype").val();
				var mode = get_mode(mimetype);
				
				if (mode == "python") {
					mode = {name: "python",
	                       version: 2,
	                       singleLineStringErrors: false}
				}
				editor.setOption("mode", mode);
			}
		

	        $(function () {
	        	$("#tree").jstree({ 
	        		"json_data" : {
	        			"ajax" : {
	        				"url" : "/tree/data",
	        				"data" : function (n) { 
	        					return { id : n.attr ? n.attr("id") : 0 }; 
	        				}
	        			}
	        		},
	        		"plugins" : [ "themes", "json_data", "dnd", "ui", "contextmenu", "crrm" ],
	        		"themes": {
	        			"theme": "default",
	        			"icons": false,
	        			"dots": true
	        		},
	        		"dnd": {
	        			        			
	        		},
	        		"ui": {
	        			"select_limit": 1,
	        			
	        		}
	        	});
	        	
	        	$("#tree").bind("create.jstree", function(e, data) {
	        		var parent_id = data.rslt.parent.attr("id");
	        		var title = data.rslt.name;
	        		
	        		if (parent_id == "tree") {
	        			parent_id = 0;
	        		}
	        		
	        		$.ajax({
	    				async : false,
	    				type: 'POST',
	    				url: "/tree/data",
	    				data : { 
	    					"operation" : "create_node", 
	    					"ref" : parent_id,
	    					"title" : title
	    				},
	    				success : function (r) {
	    					if(r.status) {
	    						$(data.rslt.obj).attr("id", r.id);
	    					} else {
	    						$.jstree.rollback(data.rlbk);
	    					}
	    				}
	    			});
	        	});
	        	
	        	$("#tree").bind("remove.jstree", function(e, data) {
	        		var id = data.rslt.obj[0].id;

	        		$.ajax({
	    				async : false,
	    				type: 'POST',
	    				url: "/tree/data",
	    				data : { 
	    					"operation" : "remove_node", 
	    					"id" : id
	    				},
	    				success : function (r) {
	    					if(!r.status) {
	    						$.jstree.rollback(data.rlbk);
	    					}
	    				}
	    			});
	        	});
	        	
	        	$("#tree").bind("move_node.jstree", function(e, data) {
	        		var moved_id = data.rslt.o[0].id;
	        		var parent_id = data.rslt.np.attr("id");
	        		if (parent_id == "tree") {
	        			parent_id = 0;
	        		}
	        		
	        		$.ajax({
	    				async : false,
	    				type: 'POST',
	    				url: "/tree/data",
	    				data : { 
	    					"operation" : "move_node", 
	    					"id" : moved_id,
	    					"ref" : parent_id,
	    					"copy" : data.rslt.cy ? 1 : 0
	    				},
	    				success : function (r) {
	    					if(!r.status) {
	    						$.jstree.rollback(data.rlbk);
	    					}
	    				}
	    			});
	        	});
	        	
	        	$("#tree").bind("rename.jstree", function(e, data) {
	        		var id = data.rslt.obj.attr("id");
	        		var title = data.rslt.new_name
	        		
	        		$.ajax({
	    				async : false,
	    				type: 'POST',
	    				url: "/tree/data",
	    				data : { 
	    					"operation" : "update_node", 
	    					"id" : id,
	    					"title" : title
	    				},
	    				success : function (r) {
	    					if(r.status) {
	    						if (get_selected_id() == id) {
	    							$("#title").val(title);
	    						}
	    					} else {
	    						$.jstree.rollback(data.rlbk);
	    					}
	    				}
	    			});
	        	});
	        	
	        	function set_editor_enabled(value) {
	        		if (value) {
	        			$("#mimetype").removeAttr("disabled");
	        			$("#title").removeAttr("disabled");
	        			$("#restricted").removeAttr("disabled");
	        			$("#view_page").removeAttr("disabled");
	        			$("#save_text").removeAttr("disabled");
	        		} else {
	        			$("#mimetype").attr("disabled", "disabled");
	        			$("#title").attr("disabled", "disabled");
	        			$("#restricted").attr("disabled", "disabled");
	        			$("#view_page").attr("disabled", "disabled");
	        			$("#save_text").attr("disabled", "disabled");
	        			
	        			editor.setValue("");
						$("#mimetype").val("");
						$("#title").val("")
						$("#restricted").prop("checked", false);
						view_path = null;
	        		}
	        		editor.setOption("readOnly", !value)
	        	}
	        	
	        	$("#tree").bind("select_node.jstree", function(e, data) {
	        		var id = data.rslt.obj.attr("id");
	        		$.ajax({
	    				async : false,
	    				type: 'POST',
	    				url: "/tree/data",
	    				data : { 
	    					"operation" : "select_node", 
	    					"id" : id
	    				},
	    				success : function (r) {
	    					if (r.status) {
	    						set_editor_enabled(true);
	    						editor.setValue(r.text);
	    						$("#mimetype").val(r.mimetype);
	    						$("#title").val(r.title)
	    						$("#restricted").prop("checked", (r.restricted == 1));
	    						view_path = r.path;
	    					} else {
	    						set_editor_enabled(false);
	    					}
	    					set_mode();
	    				}
	    			});
	        	});
	        	
	        	$("#tree").bind("open_node.jstree close_node.jstree", function (e, data) {
	        		var id = data.rslt.obj.attr("id");
	        		var open = "0";
	        		if (e.type == "open_node") {
	        			var open = "1";
	        		}
	        		
	        		$.ajax({
	    				async : true,
	    				type: 'POST',
	    				url: "/tree/data",
	    				data : { 
	    					"operation" : "update_node", 
	    					"id" : id,
	    					"open" : open
	    				},
	    				success : function (r) {
	    					if(!r.status) {
	    						alert("update open/close status error");
	    					}
	    				}
	    			});
	        	});
	        	
				$("#title").change(function() {
					var selected = $('#tree').jstree('get_selected');
					if (!selected) {
						return;
					}
					
					var id = selected.attr("id");
	        		var title = $("#title").val();
	        		
	        		$.ajax({
	    				async : false,
	    				type: 'POST',
	    				url: "/tree/data",
	    				data : { 
	    					"operation" : "update_node", 
	    					"id" : id,
	    					"title" : title
	    				},
	    				success : function (r) {
	    					if(r.status) {
	    						if (get_selected_id() == id) {
	    							$("#tree").jstree("set_text", selected, title);
	    						}
	    					}
	    				}
	    			});
				});
				
				$("#mimetype").change(function() {
					var selected = $('#tree').jstree('get_selected');
					if (!selected) {
						return;
					}
					
					var id = selected.attr("id");
	        		var mimetype = $("#mimetype").val();
	        		
	        		$.ajax({
	    				async : false,
	    				type: 'POST',
	    				url: "/tree/data",
	    				data : { 
	    					"operation" : "update_node", 
	    					"id" : id,
	    					"mimetype" : mimetype
	    				},
	    				success : function (r) {
	    					if(!r.status) {
	    						alert("update failed");
	    					}
	    				}
	    			});
	        		
	        		set_mode();
				});
				
				$("#restricted").change(function() {
					var selected = $('#tree').jstree('get_selected');
					if (!selected) {
						return;
					}
					
					var id = selected.attr("id");
	        		var restricted = $("#restricted").prop("checked") ? "1" : "0";
	        		
	        		$.ajax({
	    				async : false,
	    				type: 'POST',
	    				url: "/tree/data",
	    				data : { 
	    					"operation" : "update_node", 
	    					"id" : id,
	    					"restricted" : restricted
	    				},
	    				success : function (r) {
	    					if(!r.status) {
	    						alert("update failed");
	    					}
	    				}
	    			});
				});
				
				$("#save_text").click(function() {
					var selected = $('#tree').jstree('get_selected');
					if (!selected) {
						return;
					}
					
					var id = selected.attr("id");
	        		var text = editor.getValue();
	        		
	        		$.ajax({
	    				async : false,
	    				type: 'POST',
	    				url: "/tree/data",
	    				data : { 
	    					"operation" : "update_node", 
	    					"id" : id,
	    					"text" : text
	    				},
	    				success : function (r) {
	    					if(!r.status) {
	    						alert("update failed");
	    					}
	    				}
	    			});
				});
				
				$("#view_page").click(function() {
					if (view_path) {
						window.open(view_path, "_blank");
					}
				});
	        	
	        	// CODE EDITOR
	        	editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
	                mode: {name: "python",
	                       version: 2,
	                       singleLineStringErrors: false},
	                lineNumbers: true,
	                indentUnit: 4,
	                tabMode: "shift",
	                indentWithTabs: true,
	                matchBrackets: true,
	                autofocus: true,
	                saveFunction: function() {
	                	alert("save");
	                }
	            });
	        	
	        	set_editor_enabled(false);
	        });
        </script>

	<script type="text/javascript" >
		
	</script>
			
    <style type="text/css">
		html {
		    height: 100%;
		    width: 100%;
		    /* overflow: hidden; */
		}
		
		body {
		    overflow-x: hidden;
		    margin: 0;
		    padding: 0;
		    height: 100%;
		    width: 100%;
		    font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana, sans-serif;
		    font-size: 12px;
		    background: #FFFFFF;
		}
		
		#editor {
		    position: absolute;
		    top: 10px;
		    left: 320px;
		    bottom: 0px;
		    right: 0px;
		    background: white;
		}
		
		.CodeMirror-scroll {
			position: absolute;	
			left: 320px;
			height: auto;
			overflow-y: hidden;
			overflow-x: auto;
			width: 100%
		}
		
		#controls {
			margin: 0;
			padding: 0;
		    position: fixed;
			width: 300px;
		}
	
		#tree {
			width: 100%;
			float: left;
			background: #FFFFFF;
		}
		
		#content {
			padding: 10px;
			margin: 0;
		}
	</style>
</head>
<body>
	<div id="content" >
	<div id="controls">
		<table style="align: right">
			<tr>
			<td>title </td>
			<td colspan="2" style="width: 100%"><input type="text" id="title" style="width: 100%" /></td>
			</tr>
			<tr>
			<td>mimetype </td>
			<td colspan="2" style="width: 100%"><input type="text" id="mimetype" style="width: 100%" /></td>
			</tr>
			<tr>
			<td></td>
			<td style="width: auto"><input type="checkbox" id="restricted" />
			<label for="restricted">restricted</label></td>
			<td style="text-align: right"><input type="button" id="view_page" value="view" /> <input type="button" id="save_text" value="save" /></td>
			</tr>
		</table>
		<hr />
		<div id="tree" ></div>
	</div>
	
	<textarea id="editor"></textarea>
	</div>
</body>
</html>